<template>
  <!-- 4. "我参与的任务"页面 -->
  <div class="tasks">
    <el-container>
      <el-header>
        <div class="header">
          <div class="info">
            <h2 class="title">我参与的任务</h2>
            <span class="describe">在这里，可以集中管理您正在参与的任务</span>
          </div>
        </div>
      </el-header>
      <el-container class="content">
        <el-tabs tab-position="left">
          <el-tab-pane label="实施中">
            <loader color="#fff" v-if="loading" />
            <template v-if="inProgressTasksListLen > 0">
              <template v-for="task in inProgressTasks" :key="task.taskId">
                <square-list-items :show-data="task"></square-list-items>
              </template>
            </template>
            <el-empty
              v-else-if="inProgressTasksListLen === 0"
              description="没有找到任务"
            ></el-empty>
          </el-tab-pane>

          <el-tab-pane label="已完成">
            <loader color="#fff" v-if="loading" />
            <template v-if="completedTasksListLen > 0">
              <template v-for="task in completedTasks" :key="task.taskId">
                <square-list-items :show-data="task"></square-list-items>
              </template>
            </template>
            <el-empty v-else-if="completedTasksListLen === 0" description="没有找到任务"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </el-container>
    </el-container>
    <el-backtop :right="30" :bottom="100" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getMyTask } from '@/service/user/user'
import SquareListItems from '@/views/main/tasksquare/c-cpns/square-list-items.vue'
import { ElMessage } from 'element-plus'
import Loader from '@/components/loader/loader.vue'

const inProgressTasks = ref<Task[]>([])
const completedTasks = ref<Task[]>([])
const inProgressTasksListLen = ref(-1)
const completedTasksListLen = ref(-1)
const loading = ref(true)

interface Task {
  taskId: string
  taskName: string
  taskScore: number
  taskRole: string
  taskState: string
}
const fetchTasks = async () => {
  try {
    loading.value = true
    const response = await getMyTask()
    const tasks = response.data
    inProgressTasks.value = tasks.filter((task: any) => task.taskState === 2)
    completedTasks.value = tasks.filter((task: any) => task.taskState === 3)
    inProgressTasksListLen.value = inProgressTasks.value.length
    completedTasksListLen.value = completedTasks.value.length
    loading.value = false
    console.log('我的任务:', tasks)
    console.log('实施中:', inProgressTasks.value)
    console.log('已完成:', completedTasks.value)
  } catch (error) {
    console.error('获取我的任务失败:', error)
    ElMessage.error('网络异常，请刷新重试')
  }
}

onMounted(() => {
  fetchTasks()
  document.title = '我参与的任务 - 实力接单'
})
</script>

<style lang="less" scoped>
.tasks {
  width: 1100px;
  background-color: #f0f2f5;
  margin: 0 auto;
  padding: 20px;
  .el-header,
  .el-tabs {
    background-color: #fff;
    width: 100%;
  }
  .el-header {
    margin-bottom: 15px;
    border-radius: 10px;
    height: 70px;
    .header {
      padding: 10px 20px;
      .info {
        .title {
          padding-bottom: 8px;
        }
        .describe {
          font-size: 14px;
          color: #73767a;
        }
      }
    }
  }
  .el-tabs {
    min-height: 360px;
    .el-tab-pane {
      min-height: 360px;
      padding: 20px 50px;
      position: relative;
      .el-empty {
        margin-top: 20px;
      }
      .square-list-items {
        margin: 20px 0;
      }
    }
  }
  .content {
    height: 100%;
  }
  .el-backtop {
    z-index: 1000;
  }
}
</style>
